<template>
  <div class style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import axios from "@/utils/requestzz";;

export default {
  name: 'chartlinechart',
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      uniqueID: ""
    };
  },
  computed: {},
  watch: {},
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = 0.3

    var option = {
      // backgroundColor: '#2c343c',
      title: {
        text: "管网供热面积",
        // show: false,
        textStyle: {
          color: "#fff",
          fontSize: 36 * scale,
          fontWeight: "bold"
        }
      },
      // grid: {
      //   containLabel: true,
      //   bottom: "5%",
      //   top: "500px",
      //   left: "5%",
      //   right: "5%"
      // },
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
        textStyle: {
          fontWeight: "normal",
          fontSize: 30 * scale
        }
      },
      // visualMap: {
      //     show: false,
      //     min: 500,
      //     max: 600,
      //     inRange: {
      //         //colorLightness: [0, 1]
      //     }
      // },
      series: [
        {
          type: "pie",
          radius: ["45%", "60%"],
          hoverAnimation: true,
          color: ["#5957C2", "#76FBC0", "#FCC708", "#29C6FA"],

          // type: 'pie',
          // radius: '60%',
          // center: ['50%', '50%'],
          // color: ['#00C1FE', '#5957C2', '#FCC708', '#53F3F3'], //'#FBFE27','rgb(11,228,96)','#FE5050'
          data: [
            {
              value: 10, //表格中加载过了 所以不用再调用ajax
              name: "一号管网"
            },
            {
              value: 10,
              name: "二号管网"
            },
            {
              value: 10,
              name: "三号管网"
            },
            {
              value: 10,
              name: "四号管网"
            }
          ].sort(function(a, b) {
            return a.value - b.value;
          }),
          // roseType: 'radius',
          label: {
            normal: {
              textStyle: {
                fontSize: 30 * scale
              },
              formatter: function(params, ticket, callback) {
                return (
                  "{white|" +
                  10 +
                  "}\n{blue|" +
                  20 +
                  "}{white|万㎡}"
                );
              },
              rich: {
                white: {
                  color: "#fff",
                  fontSize: 30 * scale,
                  padding: [10, 0]
                },
                blue: {
                  color: "#53F3F3",
                  fontSize: 32 * scale
                }
              }
            }
          },
          labelLine: {
            normal: {
              length: 30 * scale,
              length2: 50 * scale,
              lineStyle: {
                width: 5
              }
            }
          }
        }
      ]
    };

    myChart.setOption(option);

    //数据刷新.................................
    // setInterval(() => {
    // axios.get(this.componentDetail.content.apiurl).then(res => {
    //刷新option  data
    // });
    // }, this.componentDetail.content.interval);

    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>
